<template>
  <div>
    <button ref="btn1" @click="add">添加</button>
    <table border="1" cellspacing="0">
      <thead>
        <tr>
          <th colspan="5">818狂欢购物节</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>名称</td>
          <td>单价</td>
          <td>数量</td>
          <td>小结</td>
          <td>操作</td>
        </tr>
        <tr v-for="(phone, index) in cart" :key="index">
          <td>
            {{phone.name}}
          </td>
          <td>{{phone.price}}</td>
          <!-- <td>{{phone.num}}</td> -->
          <td>
            <input type="text" v-model="phone.num" />
          </td>
          <td>{{phone.num * phone.price}}</td>
          <td>
            <button>删除</button>
            <button @click="updata(index)">修改</button>
          </td>
        </tr>
        <tr>
          <td colspan="2">总计</td>
          <td>{{getNum1}}件</td>
          <td>{{getPrice1}}元</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    <child :info="phoneInfo" 
      v-show="isShow"
      @cancel="isShow = !isShow"
      @sure="changeData">
    </child>
    <hr>
    <!-- <child1 ref="child2">
    </child1> -->
    <!-- <child3>
      <template v-slot:slot1="props">
        <p>{{props.item}}</p>
      </template>
    </child3>
    <hr> -->
  </div>
</template>
<script>
import child from "./child";
import child1 from "./child1";
import child3 from "./child3";
import $ from 'jquery'
export default {
  name: 'cart',
  data() {
    return {
      cart: [
        {
          name: "iphone 12",
          price: 5999,
          num: 12
        },
        {
          name: "huawei mate 40 pro",
          price: 4999,
          num: 35
        },
        {
          name: "mi 10 pro",
          price: 3999,
          num: 45
        },
      ],
      // 是否显示弹窗组件
      isShow: false,
      // 传给自组件的数据
      phoneInfo: {}
    };
  },
  mounted() {
    console.log(this.$route.query)
  },
  components: {
    child, child1, child3
  },
  // 计算属性
  computed: {
    getNum1() {
      console.log("computed");
      let num = 0;
      this.cart.forEach((item) => {
        num += item.num * 1;
      });
      return num;
    },
    getPrice1: {
      get() {
        let num = 0;
        this.cart.forEach((element) => {
          num += element.num * element.price;
        });
        return num;
      },
      set() {
        console.log(666666666666);
        return 123;
      },
    },
  },
  methods: {
    // 添加商品，（弹窗组件）
    add() {
      // 默认数据
      let data = {
        name: "name here",
        price: 39,
        num: 4,
        index: -1
      };
      // 在父组件中控制弹窗组件的显示隐藏
      this.isShow = true;
      // 传数据
      this.phoneInfo = data;
    },
    // 修改商品（弹窗组件）
    updata(index) {
      this.isShow = true;
      // 给手机数据新增索引，方便知道修改的是谁
      this.cart[index].index = index;
      // 传数据
      this.phoneInfo = this.cart[index];
    },
    // 更新商品
    changeData(val) {
      this.isShow = false;
      if(val.index > -1) {
        // index > -1说明是更新
        this.cart.splice(val.index, 1, val);
      }else {
        // 新增商品的index是-1
        this.cart.push(val)
      }
    },
    // 保存修改，已经停止使用！！！！！！！！！！！！
    save(index) {
      this.cart[index].edit = false;
    }
  }
};

</script>
<style lang="">
  .div1 {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>